<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文章详情</title>
    <link rel="stylesheet" href="article.css">
</head>

<body>

    <!-- 遮罩 + 底部弹窗 -->
    <div id="replyOverlay" class="reply-overlay">
        <div class="reply-sheet">
            <!-- 上半部分：输入区 -->
            <div class="reply-top">
                <!-- 不可编辑前缀 -->
                <div class="reply-prefix">
                    <span class="reply-gray">@</span><span class="reply-name">小明</span>
                </div>
                <textarea id="replyInput" class="reply-textarea" placeholder="写回复…"></textarea>
            </div>

            <!-- 下半部分：表情 + 发送 -->
            <div class="reply-bottom">
                <div class="reply-emo">
                    <!-- 10 个常用 emoji -->
                    <span>😀</span><span>😂</span><span>😍</span><span>🤔</span><span>👍</span>
                    <span>❤️</span><span>🔥</span><span>🎉</span><span>😭</span><span>🙈</span>
                </div>
                <button class="reply-send">发送</button>
            </div>
        </div>
    </div>



    <div class="page">
        <!-- 顶部导航占位 -->
        <header class="nav">Nav Bar</header>

        <!-- 主体 -->
        <main class="container">
            <!-- 左侧文章 -->
            <article class="article">
                <h1 class="article-title">文章标题：Flex 布局完全指南</h1>
                <div class="article-meta">
                    <span>2025-06-04</span><span>作者：Kimi</span><span>阅读 1.2k</span>
                </div>
                <div class="article-content">
                    <p>这里是正文内容……（省略 2000 字）</p>
                </div>
            </article>

            <!-- 右侧推荐 -->
            <!-- <aside class="sidebar">
                <div class="side-block">相关推荐 1</div>
                <div class="side-block">相关推荐 2</div>
            </aside> -->
        </main>

        <!-- 评论区 -->
        <section class="comment-section">
            <h3 class="comment-header">评论区 · <small>2 条评论</small></h3>

            <!-- 发表评论 -->
            <div class="comment-post">
                <img class="avatar" src="https://i.pravatar.cc/40?u=me" alt="">
                <div class="post-box">
                    <textarea placeholder="发一条友善的评论…"></textarea>
                    <div class="post-action">
                        <button class="btn-post" onclick="todoComment()">发表评论</button>
                    </div>
                </div>
            </div>

            <!-- 评论列表 -->
            <ul class="comment-list">
                <!-- 一级评论 -->
                <li class="comment-item">
                    <img class="avatar" src="https://i.pravatar.cc/40?u=a" alt="">
                    <div class="comment-main">
                        <div class="comment-user">
                            <span class="name">小明</span>
                            <!-- <span class="time">3 小时前</span> -->
                        </div>
                        <div class="comment-content">干货满满，收藏了！</div>
                        <div class="comment-action">
                            <!-- <span class="like"><svg class="icon" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg> 42</span> -->
                            <span class="replyButton" data-id="1">回复</span>
                        </div>

                        <!-- 二级评论 -->
                        <ul class="sub-comment">
                            <li class="comment-item">
                                <img class="avatar" src="https://i.pravatar.cc/40?u=b" alt="">
                                <div class="comment-main">
                                    <div class="comment-user">
                                        <span class="name">小红</span>
                                        <span class="reply"></span>
                                    </div>
                                    <div class="comment-content">同感，写得非常清楚！</div>
                                    <div class="comment-action">
                                        <!-- <span class="like"><svg class="icon" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg> 7</span> -->
                                        <span class="replyButton" data-id="2">回复</span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </section>
    </div>
    <script src="index.js"></script>

    <script src="article.js"></script>
</body>

</html>